><template>
	<view class="page">
		<u-navbar title="支付结果" bgColor="transparent" :autoBack="true" :titleStyle="{color: '#fff'}" leftIconSize="48rpx"
			leftIconColor="#fff">
		</u-navbar>

		<view class="page-ctx">
			<view class="success-wrap">
				<view class="pay-result" v-if="is_order_payed">
					<view class="icon-box">
						<image src="@/static/payment/result-done.png"></image>
					</view>
					<view class="text-box">
						<view class="text1">
							支付成功！
						</view>
						<view class="text2">
							感谢您的购买
						</view>
					</view>
				</view>

				<view class="pay-result pay-result-fail" v-else>
					<view class="icon-box">
						<image src="@/static/payment/result-fail.png" style="width: 100rpx;height: 100rpx"></image>
					</view>
					<view class="text-box">
						<view class="text1">
							支付失败！
						</view>
						<view class="text2">
							支付遇到问题~
						</view>
					</view>
				</view>

			</view>
			<view class="info-wrap">
				<view class="info-box">
					<view class="info-line" :class="{fail: !is_order_payed }">

					</view>
					<view class="info-inner">
						<view class="info-bg">

						</view>
						<view class="price">
							<text class="huobi">￥</text>
							<text class="value">{{info.pricePayed || ''}}</text>
						</view>
						<view class="info-items">
							<view class="info-item">
								<view class="label">
									订单编号：
								</view>
								<view class="text">
									{{info.orderNo || ''}}
								</view>
							</view>
							<view class="info-item">
								<view class="label">
									下单时间：
								</view>
								<view class="text">
									{{info.createdTime|| ''}}
								</view>
							</view>
							<view class="info-item" v-if="is_order_payed">
								<view class="label">
									支付方式：
								</view>
								<view class="text">
									<text v-if="payInfo.balance">余额：￥{{payInfo.balance}}</text>
									<text v-if="payInfo.applet">微信支付：￥{{payInfo.applet}}</text>
								</view>
							</view>

							
						</view>
					</view>
				</view>
				<view class="btns flex-between">
					<view class="btn-detail fit-text" @click="toIndex()">返回首页</view>
					<view class="btn-detail fit-text" @click="toOrder()">订单详情</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'order', //
				is_order_payed: true, //订单是否支付完成
				info: {

				},
				payInfo: {

				},
				id: '',
			}
		},
		onLoad(option) {
			this.id = option.id || option.order_id;
			this.is_order_payed = option.is_pay == 1
			this.type = option.type || 'order'
			this.setView()
		},
		methods: {
			setView() {
				this.query_order();
			},
			// 普通商品订单
			query_order() {
				this.showLoading({
					title: '订单查询中',
					disClose: true,
				})
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'orders_detail',
						id: this.id
					},
				}).then(res => {
					if (res.code == 200) {
						this.info = res.data;
						this.payInfo = this.info.payInfo
					}
					this.hideLoading();
				})
			},

			//
			toOrder() {
				this.toRoute({
					path: '/order-detail',
					query: {
						id: this.id,
						from: 'payment',
					},
					mode: 'reLaunch',
				})
			},
			toIndex() {
				this.toReLaunchIndex()
			}
		}
	}
</script>


<style lang="scss">
	page {

		background: #F8F8F8;

	}
</style>


<style lang="scss" scoped>
	.page {}


	.page-ctx {}

	.success-wrap {
		.pay-result {
			width: 100%;
			height: 484rpx;
			background: #CB0011;


			display: flex;
			align-items: flex-end;
			justify-content: center;
			padding-bottom: 160rpx;
			background: #CB0011;

			&.pay-result-fail {
				background: #CB0011;

				.icon-box {
					margin-right: 10rpx;
					width: 100rpx;
					height: 100rpx;

					image {
						width: 100rpx;
						height: 100rpx;
					}
				}

				.text-box {
					padding-left: 20rpx;
					padding-bottom: 0;
				}
			}
		}


		.icon-box {
			margin-right: 10rpx;
			width: 150rpx;
			height: 150rpx;

			image {
				width: 150rpx;
				height: 150rpx;
			}
		}

		.text-box {
			padding-bottom: 22rpx;

			.text1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 36rpx;
				color: #FFFFFF;
			}

			.text2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}


	.info-wrap {
		width: 710rpx;
		padding: 0 0;
		margin: 0 auto;
		position: relative;
		top: -120rpx;



		.info-box {
			width: 100%;


			.info-line {
				width: 710rpx;
				height: 24rpx;
				background: #1A581D;
				border-radius: 17rpx 17rpx 17rpx 17rpx;

				&.fail {
					background: #27A09A;
				}
			}

			.info-inner {
				position: relative;
				top: -12rpx;
				margin: 0 auto;
				width: 678rpx;
				// min-height: 445rpx;
				padding: 0 20rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 10rpx 20rpx 1rpx rgba(0, 55, 116, 0.1);
				border-radius: 0rpx 0rpx 20rpx 20rpx;



				.info-bg {
					top: 0;
					left: 0;
					right: 0;
					position: absolute;
					height: 56rpx;
					background: linear-gradient(180deg, rgba(50, 162, 56, 0.2) 0%, rgba(50, 162, 56, 0) 100%);
				}

				.price {
					font-weight: bold;
					font-size: 48rpx;
					color: #000000;
					text-align: center;
					padding: 32rpx 0;

					.huobi {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 48rpx;
						color: #000000;
					}

					.value {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 48rpx;
						color: #000000;
					}
				}

				.info-items {
					border-top: 1rpx dashed #eee;
					padding: 40rpx 0 60rpx 0;

					.info-item {
						display: flex;

						&+.info-item {
							margin-top: 40rpx;
						}


						.label {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #222222;
						}

						.text {
							flex: 1;
							overflow: hidden;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #7D7D7D;
						}
					}
				}
			}

		}
	}



	.btns {
		margin-top: 150rpx;

		.btn-detail {
			width: 334rpx;
			height: 80rpx;
			background: #CB0011;
			border-radius: 64rpx 64rpx 64rpx 64rpx;

			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}

	}
</style>